<template>
    <el-dialog v-model="visible" width="90%" :show-close="false" :title="null" :destroy-on-close="true"
        modal-class="roll-pos-image-dialog">
        <div class="dialog-body" v-loading="loading">
            <NewCoilCard :hideTitle="true" title="" :left="'辊号：' + rollNo" class="dialog-body-card">
                <el-icon class="close-icon" @click="close">
                    <Close />
                </el-icon>
                <div class="diallog-body-table-wrap">
                    <NewCoilCard title="工艺辊信息">
                        <!-- 工艺辊信息 el-table -->
                        <el-table :data="tableList" size="small" height="100%" :header-cell-style="tableHeaderStyle"
                            :cell-style="tableCellStyle" :border="false">
                            <el-table-column v-for="item in columns" :key="item.key" :prop="item.key"
                                :label="item.title" :align="item.align" :width="item.width || ''"
                                show-overflow-tooltip />
                        </el-table>
                    </NewCoilCard>
                    <div class="diallog-body-tables-wrap">
                        <NewCoilCard title="更换历史记录" width="50%">
                            <!-- 更换历史记录 el-table -->
                            <el-table :data="changeList" size="small" height="400px" v-loading="changeLoading"
                                :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :border="false">
                                <el-table-column v-for="item in columnsChange" :key="item.key" :prop="item.key"
                                    :label="item.title" show-overflow-tooltip />
                            </el-table>
                            <div class="pagination-wrap">
                                <el-pagination size="small" :pager-count="5" layout="prev, pager, next"
                                    :total="changeListTotal" v-model:current-page="queryChangeList.changePage"
                                    v-model:page-size="queryChangeList.changePageSize" @current-change="fetchChangeList"
                                    @size-change="fetchChangeList" />
                            </div>
                        </NewCoilCard>
                        <NewCoilCard title="点检历史记录" width="50%">
                            <!-- 点检历史记录 el-table -->
                            <el-table :data="checkList" size="small" height="400px" v-loading="checkLoading"
                                :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" :border="false">
                                <el-table-column v-for="item in columnsCheck" :key="item.key" :prop="item.key"
                                    :label="item.title" show-overflow-tooltip />
                            </el-table>
                            <div class="pagination-wrap">
                                <el-pagination size="small" :pager-count="5" layout="prev, pager, next"
                                    :total="checkListTotal" :defaultPageSize="queryCheckList.checkPageSize"
                                    v-model:current-page="queryCheckList.checkPage"
                                    v-model:page-size="queryCheckList.checkPageSize" @current-change="fetchCheckList"
                                    @size-change="fetchCheckList" />
                            </div>
                        </NewCoilCard>
                    </div>
                </div>
            </NewCoilCard>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, defineModel } from 'vue'
import { getRollDetails } from '/@/api/rollPosImage'
import { Close } from '@element-plus/icons-vue'
import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue'

const visible = defineModel<boolean>()

const props = defineProps<{
    param: { line: string; rGroup: string, area: string, pos: string, rType: string }
}>()

const queryCheckList = reactive({
    checkPage: 1,
    checkPageSize: 10
});

const queryChangeList = reactive({
    changePage: 1,
    changePageSize: 10
});

const checkListTotal = ref<number>(0)
const changeListTotal = ref<number>(0)

const loading = ref<boolean>(false)
const checkLoading = ref<boolean>(false)
const changeLoading = ref<boolean>(false)

const rollNo = ref<string>('')

const tableHeaderStyle = {
    background: '#183272',
    color: '#b8e8ff',
    padding: '4px 0',
    textAlign: 'center' as const,
    fontWeight: 'normal' as const,
    fontSize: '12px',
    borderBottom: '1px solid #06279d'
};

const tableCellStyle = {
    padding: '4px 0',
    textAlign: 'center' as const,
    color: '#c0c4cc',
    fontSize: '12px',
    borderBottom: '1px solid #06279d',
    borderRight: '1px solid #06279d'
};

const columns = ref([
    {
        title: '厂区',
        key: 'line',
        align: 'center',
    },

    {
        title: '机组',
        key: 'rGroup',
        align: 'center',
    },
    {
        title: '辊号',
        key: 'rollNo',
        align: 'center',
    },
    {
        title: '区域',
        key: 'area',
        align: 'center',
    },
    {
        title: '位置',
        key: 'pos',
        align: 'center',
    },
    {
        title: '类型',
        key: 'rType',
        align: 'center',
    },
    {
        title: '上/下表面',
        key: 'upperOrLowerSurface',
        align: 'center',
    },
    {
        title: '重要程度',
        key: 'imLevel',
        align: 'center',
    },
    {
        title: '直径',
        key: 'diameter',
        align: 'center',
    },
    {
        title: '长度',
        key: 'length',
        align: 'center',
    },
    {
        title: '辊面材质',
        key: 'surfMaterial',
        align: 'center',
    },
    {
        title: '材质',
        key: 'material',
        align: 'center',
    },
    {
        title: '辊面处理',
        key: 'surfHandle',
        align: 'center',
    },
    {
        title: '胶层厚度',
        key: 'glueThick',
        align: 'center',
    },
    {
        title: '曲线',
        key: 'curve',
        align: 'center',
    },
    {
        title: '动平衡等级',
        key: 'balanceLevel',
        align: 'center',
    },
    {
        title: '淬火硬度',
        key: 'quenchHard',
        align: 'center',
    },
    {
        title: '淬火层硬度',
        key: 'quenchThick',
        align: 'center',
    },
    {
        title: '粗糙度',
        key: 'rough',
        align: 'center',
    },
    {
        title: '初次上线日期',
        key: 'firstTime',
        align: 'center',
        width: '100px'
    },
    {
        title: '占用量',
        key: 'useage',
        align: 'center',
    },
    {
        title: '储备定额',
        key: 'storageRation',
        align: 'center',
    },
    {
        title: '额定寿命',
        key: 'useLife',
        align: 'center',
    },
    {
        title: '更换周期',
        key: 'changeCycle',
        align: 'center',
    },
    {
        title: '点检周期',
        key: 'checkCycle',
        align: 'center',
    },
    {
        title: '供货厂家',
        key: 'supplier',
        align: 'center',
    },
    {
        title: '更换提醒',
        key: 'changeWarn',
        align: 'center',
    },
    {
        title: '点检负责人',
        key: 'checkPerson',
        align: 'center',
    }
])

const columnsChange = [
    { title: '上线日期', key: 'launchDate' },
    { title: '下线日期', key: 'offlineTime' },
    {
        title: '更换原因', key: 'changeReason',
    },
    {
        title: '备注', key: 'remark',
    },
]

const columnsCheck = [
    { title: '点检日期', key: 'checkDate' },
    {
        title: '点检人', key: 'checkPerson',
    },
    {
        title: '备注', key: 'remark',
    },
]

const tableList = ref<any[]>([])

const changeList = ref<any[]>([])

const checkList = ref<any[]>([])

const close = () => {
    visible.value = false
}

const init = async () => {
    if (!props.param.line || !props.param.rGroup || !props.param.area || !props.param.pos || !props.param.rType) return
    loading.value = true
    try {
        const { data: { data } } = await getRollDetails({ ...props.param, ...queryCheckList, ...queryChangeList })
        tableList.value = data?.rollPosImage ? [data?.rollPosImage] : []
        rollNo.value = data?.rollPosImage?.rollNo || ''
        checkList.value = data?.rollInspectionList || []
        changeList.value = data?.rollLogs || []

        checkListTotal.value = data?.inspectionCount || 0
        changeListTotal.value = data?.changeLogCount || 0
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false
    }
}

const fetchCheckList = async () => {
    checkLoading.value = true
    try {
        const { data: { data } } = await getRollDetails({ ...props.param, ...queryCheckList, ...queryChangeList })
        checkList.value = data?.rollInspectionList || []
    } catch (error) {
        console.log(error);
    } finally {
        checkLoading.value = false
    }
}

const fetchChangeList = async () => {
    changeLoading.value = true
    try {
        const { data: { data } } = await getRollDetails({ ...props.param, ...queryCheckList, ...queryChangeList })
        changeList.value = data?.rollLogs || []
    } catch (error) {
        console.log(error);
    } finally {
        changeLoading.value = false
    }
}

watch(visible, async (val) => {
    if (val) await init()
})



</script>
<style lang="scss" scoped>
.dialog-body {
    background-color: rgba(28, 58, 99, 0.7);
    :deep(.el-loading-mask){
        background-color: rgba(0,0,0,0.4)
    }
    .dialog-body-card {
        position: relative;

        .close-icon {
            position: absolute;
            right: 14px;
            top: 0.9vh;
            cursor: pointer;
            color: #fff;
            font-size: 1.7vh;
        }
    }

    :deep(.containerContent) {
        flex-direction: column !important;
    }

    .dialog-body-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        gap: 10px;
        padding: 24px 24px;

        .status-wrap {
            display: flex;
            align-items: center;
            gap: 10px;

            span {
                margin-right: 5px;
                color: #fff;
            }

            .circle {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #00FF00;

                &.unbound {
                    background-color: #ff4d4f; // 红色
                }

                &.not-checked {
                    background-color: #ee7616;
                }

                &.not-replaced {
                    background-color: #e11735;
                }
            }
        }
    }

    .diallog-body-table-wrap {
        display: flex;
        flex-direction: column;
        gap: 14px;

        :deep(.containerContent) {
            padding: 5px 10px;
        }

        .diallog-body-tables-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;

            .pagination-wrap {
                display: flex;
                justify-content: right;
                padding: 8px 0 3px;

                :deep(.el-pagination) {

                    button,
                    li {
                        background-color: transparent;
                        color: #fff;

                        &.is-active {
                            color: var(--el-pagination-hover-color);
                        }
                    }
                }
            }
        }
    }

    /* Deep styles for ElTable */
    :deep(.el-table) {
        background-color: transparent !important;
        border: none !important;
    }

    :deep(.el-table tr:nth-child(odd)) {
        background-color: #0f2142 !important;
    }

    :deep(.el-table tr:nth-child(even)) {
        background-color: #142a52 !important;
    }

    :deep(.el-table th.el-table__cell) {
        background-color: #183272 !important;
        color: #b8e8ff !important;
        border-bottom: 1px solid #06279d !important;
        padding: 4px 0;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
    }

    :deep(.el-table td.el-table__cell) {
        background-color: transparent !important;
        color: #c0c4cc !important;
        border-bottom: 1px solid #06279d !important;
        border-right: 1px solid #06279d !important;
        padding: 4px 0;
        font-size: 12px;
        text-align: center;
    }

    :deep(.el-table td.el-table__cell:first-child),
    :deep(.el-table th.el-table__cell:first-child) {
        border-left: none !important;
    }

    :deep(.el-table td.el-table__cell:last-child),
    :deep(.el-table th.el-table__cell:last-child) {
        border-right: none !important;
    }

    :deep(.el-table--border .el-table__inner-wrapper::after),
    :deep(.el-table--border::after),
    :deep(.el-table--border::before),
    :deep(.el-table__inner-wrapper::before) {
        background-color: #06279d !important;
    }

    :deep(.el-table .el-table__border-left-patch),
    :deep(.el-table .el-table__border-right-patch) {
        background-color: #06279d !important;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
        background-color: inherit !important;
    }

    :deep(.el-table__body-wrapper::-webkit-scrollbar) {
        width: 4px;
        height: 4px;
    }

    :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
        background-color: rgba(58, 113, 168, 0.5);
        border-radius: 2px;
    }

    :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
        background-color: rgba(58, 113, 168, 0.8);
    }
}
</style>
